<template>
  <!-- 操作栏 -->
  <div class="header">
    <div class="header-title">
      <svg-icon name="icon"></svg-icon>
      {{ $t('menus.Icon') }}
    </div>
    <div></div>
  </div>
  <!-- 图标数据 -->
  <el-card shadow="never">
    <div class="parent">
      <div
        v-for="(item, index) in iconList"
        :key="item.id"
        class="item"
        @click="copy(item)"
      >
        <svg-icon :name="item.code" class="icon-container"></svg-icon>
        <div class="item-name">{{ item.name }}</div>
      </div>
    </div>

    <!-- </div> -->
  </el-card>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getIconList } from '@/api/system.js'
import useClipboard from 'vue-clipboard3'
const { toClipboard } = useClipboard()

const iconList = ref([])

// 加载图标数据
const initIconList = async () => {
  const res = await getIconList()
  iconList.value = JSON.parse(JSON.stringify(res.data))
}
initIconList()

// 复制
const copy = async (item) => {
  try {
    await toClipboard(item.name)
    ElMessage.success('复制名称成功')
  } catch (e) {
    console.error(e)
    ElMessage.error('复制名称失败')
  }
}
</script>
<style lang="scss" scoped>
.header {
  margin-top: 5.5px;
  padding-bottom: 16px;
  box-sizing: border-box;
  &-title {
    color: #666;
    font-weight: 600;
  }
}
.icon-container {
  width: 50px;
  height: 50px;
}
.parent {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  position: relative;
  .item {
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    &-name {
      font-size: 20px;
    }
  }
}
</style>
